<template>
  <el-container>
    <el-header height="20px">
      <div style="height:20px; font-size: 15px;background-color: rgba(205,205,205,0.2)">
        <div style="float: left; margin-left: 20px">
          <div>业务模块 > 房源信息审批管理</div>
        </div>
      </div>
    </el-header>
    <el-main>
      <el-tabs style="height: 450px" type="card">
        <el-tab-pane label="未审批" size="mini">
          <div style="float: left">
            <el-button @click="agree()" type="danger" size="mini">批准</el-button>
            <el-button @click="agreeAll()" type="danger" size="mini">全部批准</el-button>
            <el-button @click="refused()" type="danger" size="mini">拒绝</el-button>
          </div>
          <el-table
            :data="noProcessedData"
            style="width: 100%;"
            row-key="czfxxlsh"
            height="350"
            @selection-change="handleSelectionChange2"
            default-expand-all>
            <el-table-column
              type="selection"
              width="55">
            </el-table-column>
            <el-table-column
              prop="fbsj"
              align="center"
              label="发布时间">
            </el-table-column>
            <el-table-column
              prop="xqxx.xqmc"
              align="center"
              label="小区名称">
            </el-table-column>
            <el-table-column
              align="center"
              label="中心">
              <template slot-scope="scope">
                <el-popover
                  placement="bottom"
                  title="地图"
                  width="300"
                  trigger="click"
                >
                  <div style="width: 300px;height: 250px">
                    <el-amap v-if="scope.row.xqxx.center === showNum" vid="amapDemo"
                             :center="[scope.row.xqxx.center.split(',')[0],scope.row.xqxx.center.split(',')[1]]"
                             :zoom="17"
                             :pitch="66">
                      <el-amap-marker
                        :position="[scope.row.xqxx.center.split(',')[0],scope.row.xqxx.center.split(',')[1]]"
                        :vid="index">
                      </el-amap-marker>
                    </el-amap>
                  </div>
                  <el-button slot="reference" @click="showNum = scope.row.xqxx.center" type="text">{{
                      scope.row.xqxx.center
                    }}
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="出租面积"
              align="center"
              prop="czmj">
            </el-table-column>
            <el-table-column
              label="出租金额"
              align="center"
              prop="czje">
            </el-table-column>
            <el-table-column
              label="租房方式"
              align="center">
              <template slot-scope="scope">
                <span>{{ getDictLabel(dictZFFS, scope.row.zffs) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="房东姓名"
              align="center"
              prop="fdxx.realName">
            </el-table-column>
            <el-table-column label="操作"
                             align="center">
              <template slot-scope="scope">
                <el-button @click.native.prevent="showRental(scope)"
                           type="text"
                >查看详情
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange2"
            :current-page.sync="currentPage2"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total2">
          </el-pagination>
        </el-tab-pane>
        <el-tab-pane label="已审批">
          <el-table
            :data="processedData"
            style="width: 100%;"
            row-key="czfxxlsh"
            height="380"
            default-expand-all>
            <el-table-column
              prop="fbsj"
              align="center"
              label="发布时间">
            </el-table-column>
            <el-table-column
              prop="xqxx.xqmc"
              align="center"
              label="小区名称">
            </el-table-column>
            <el-table-column
              align="center"
              label="中心">
              <template slot-scope="scope">
                <el-popover
                  placement="bottom"
                  title="地图"
                  width="300"
                  trigger="click"
                >
                  <div style="width: 300px;height: 250px">
                    <el-amap v-if="scope.row.xqxx.center === showNum" vid="amapDemo"
                             :center="[scope.row.xqxx.center.split(',')[0],scope.row.xqxx.center.split(',')[1]]"
                             :zoom="17"
                             :pitch="66">
                      <el-amap-marker
                        :position="[scope.row.xqxx.center.split(',')[0],scope.row.xqxx.center.split(',')[1]]"
                        :vid="index">
                      </el-amap-marker>
                    </el-amap>
                  </div>
                  <el-button slot="reference" @click="showNum = scope.row.xqxx.center" type="text">{{
                      scope.row.xqxx.center
                    }}
                  </el-button>
                </el-popover>
              </template>
            </el-table-column>
            <el-table-column
              label="出租面积"
              align="center"
              prop="czmj">
            </el-table-column>
            <el-table-column
              label="出租金额"
              align="center"
              prop="czje">
            </el-table-column>
            <el-table-column
              label="租房方式"
              align="center">
              <template slot-scope="scope">
                <span>{{ getDictLabel(dictZFFS, scope.row.zffs) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="房东姓名"
              align="center"
              prop="fdxx.realName">
            </el-table-column>
            <el-table-column
              label="审批结果"
              align="center">
              <template slot-scope="scope">
                <span>{{ getDictLabel(dictJG, scope.row.sfsp) }}</span>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            @current-change="handleCurrentChange1"
            :current-page.sync="currentPage1"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="total1">
          </el-pagination>
        </el-tab-pane>
      </el-tabs>
      <el-dialog
        :before-close="handleClose"
        title="查看租房发布信息"
        :visible.sync="dialogVisible"
        width="700px"
      >
        <div style="height: 450px;min-width: 600px">
          <el-descriptions title="出租房信息" :column="3" border>
            <el-descriptions-item label="租房信息id">{{ rentalInfo.czfxxlsh }}</el-descriptions-item>
            <el-descriptions-item label="区域位置">
              <el-cascader
                disabled
                v-model="rentalInfo.qywzid"
                :options="options"
                :props="props"></el-cascader>
            </el-descriptions-item>
            <el-descriptions-item label="商圈">{{ rentalInfo.sqxx.sqmc }}</el-descriptions-item>
            <el-descriptions-item label="小区">{{ rentalInfo.xqxx.xqmc }}</el-descriptions-item>
            <el-descriptions-item label="面积">{{ rentalInfo.czmj }}</el-descriptions-item>
            <el-descriptions-item label="出租金额">{{ rentalInfo.czje }}</el-descriptions-item>
            <el-descriptions-item label="付款方式">{{ getDictLabel(dictFKFS, rentalInfo.fkfs) }}</el-descriptions-item>
            <el-descriptions-item label="租房方式">{{ getDictLabel(dictZFFS, rentalInfo.zffs) }}</el-descriptions-item>
            <el-descriptions-item label="房屋类型">{{ getDictLabel(dictFWLX, rentalInfo.fwlx) }}</el-descriptions-item>
            <el-descriptions-item label="房间类型">{{ getDictLabel(dictFJLX, rentalInfo.fjlx) }}</el-descriptions-item>
            <el-descriptions-item label="房屋门牌号">{{ rentalInfo.fwmph }}</el-descriptions-item>
            <el-descriptions-item label="房东姓名">{{ rentalInfo.fdxx.realName }}</el-descriptions-item>
            <el-descriptions-item label="图片">
              <el-image
                style="width: 100px;height: 100px"
                ref="myImg"
                :src="rentalInfo.fwzp[0]"
                :preview-src-list="rentalInfo.fwzp">
              </el-image>
            </el-descriptions-item>
          </el-descriptions>
        </div>

      </el-dialog>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: "rentalModule",
  data() {
    return {
      showNum: '',
      processedData: [],
      noProcessedData: [],
      pageSize: 10,
      currentPage1: 1,
      currentPage2: 1,
      total1: 0,
      total2: 0,
      dictZFFS: [],
      dictFKFS: [],
      dictFWLX: [],
      dictFJLX: [],
      dictJG: [],
      dialogVisible: false,
      options: [],
      props: {
        value: 'areaId',
        label: 'areaName',
        children: 'children'
      },
      rentalInfo: {
        czfxxlsh: '',
        qywzid: [],
        sqxx: {
          sqmc: '',
        },
        xqxx: {
          xqmc: '',
        },
        fdxx: {
          realName: '',
        },
        czmj: '',
        fkfs: '',
        zffs: '',
        fwlx: '',
        fjlx: '',
        xzje: '',
        fwmph: '',
        fwzp:[],
      },
      selectList: [],
    }
  },
  mounted() {
    this.getAreaTree()
    this.$getDict("ZFFS").then(result => {
      this.dictZFFS = result
    })
    this.$getDict("FKFS").then(result => {
      this.dictFKFS = result
    })
    this.$getDict("FWLX").then(result => {
      this.dictFWLX = result
    })
    this.$getDict("FJLX").then(result => {
      this.dictFJLX = result
    })
    this.$getDict("JG").then(result => {
      this.dictJG = result
    })
    this.getProcessedData()
    this.getNoProcessedData()

  },
  methods: {
    agree() {
      this.$axios({
        url: "/rental/agreeRentals",
        method: "post",
        params: {
          agreeIds: this.selectList.join(';')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.getNoProcessedData();
          this.getProcessedData();
          this.$message.success("操作成功！")
        } else {
          this.$message.error("操作失败，请联系管理员！")
        }
      })
    },
    agreeAll() {
      this.$axios({
        url: "/rental/agreeAllRental",
        method: "post",
      }).then(res => {
        if (res.data.code === 200) {
          this.getNoProcessedData();
          this.getProcessedData();
          this.$message.success("操作成功！")
        } else {
          this.$message.error("操作失败，请联系管理员！")
        }
      })
    },
    refused() {
      this.$axios({
        url: "/rental/refusedRentals",
        method: "post",
        params: {
          refusedIds: this.selectList.join(';')
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.getNoProcessedData();
          this.getProcessedData();
          this.$message.success("操作成功！")
        } else {
          this.$message.error("操作失败，请联系管理员！")
        }
      })
    },
    handleSelectionChange2(val) {
      this.selectList = []
      val.forEach(item => {
        this.selectList.push(item.czfxxlsh)
      })
    },
    handleClose() {
      this.dialogVisible = false
    },
    showRental(scope) {
      this.$nextTick(() => {
        let fwzp = []
        scope.row.fwzp.forEach(item =>{
          fwzp.push("http://192.168.123.150/"+item.path)
        })
        this.rentalInfo = {
          ...scope.row,
          qywzid: scope.row.qywzid.split(';').map(Number),
          fwzp: fwzp,
        }
      })
      this.dialogVisible = true
    },
    getNoProcessedData() {
      this.$axios({
        url: "/rental/getNoProcessedRentalList",
        method: 'get',
        params: {
          pageSize: this.pageSize,
          pageNo: this.currentPage2
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.noProcessedData = res.data.data.records
          this.total2 = res.data.data.total2
        } else {
          this.$message.error("操作失败，请联系管理员！")
        }
      })
    },
    getProcessedData() {
      this.$axios({
        url: "/rental/getProcessedRentalList",
        method: 'get',
        params: {
          pageSize: this.pageSize,
          pageNo: this.currentPage1
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.processedData = res.data.data.records
          console.log(11111111111111)
          console.log(this.processedData)
          this.total1 = res.data.data.total1
        } else {
          this.$message.error("操作失败，请联系管理员！")
        }
      })
    },
    handleCurrentChange2(val) {
      this.currentPage2 = val
      this.getNoProcessedData()
    },
    handleCurrentChange1(val) {
      this.currentPage1 = val
      this.getProcessedData()
    },
    getDictLabel(list, value) {
      return this.$getDictLabel(value, list);
    },
    getAreaTree() {
      this.$axios({
        url: "/area/getAreaTree",
        get: "get",
      }).then(res => {
        this.options = res.data.data
      })
    },
  }
}
</script>

<style scoped>

</style>
